<template>
    <div>
        <h2>news</h2>
        <ul>
            <li :style="{opacity}">
                欢迎学习
            </li>
            <li>
                news
                <input type="text">
            </li>
            <li>
                news
                <input type="text">
            </li>
            <li>
                news
                <input type="text">
            </li>
        </ul>
    </div>
   
</template>

<script>
export default {
    name: 'stuNews',
    data () {
        return {
            opacity: 1,
            timer: 0
        }
    },
    activated () {
        //激活,从没有出现 到 出现在你面前
        console.log('news组件被激活了')
        this.timer = setInterval(() => {
            console.log('@定时器会一直执行,因为keep-alive不触发销毁流程')
            this.opacity -= .01
            if(this.opacity <= 0) this.opacity = 1
        }, 16);
    },
    deactivated () {
        //失活, 从 出现在你面前 到 切换到其他组件
        console.log('news组件失活了')
        clearInterval(this.timer)
    }
    // beforeDestroy () {
    //     console.log('news组件即将被销毁')
    //     clearInterval(this.timer)
    // },
    // mounted () {
    //     this.timer = setInterval(() => {
    //         console.log('@定时器会一直执行,因为keep-alive不触发销毁流程')
    //         this.opacity -= .01
    //         if(this.opacity <= 0) this.opacity = 1
    //     }, 16);
    // }
}
</script>

<style>

</style>